<template>

<div>
  <div>
    <span id="leftMidTitle">用例执行情况</span>
  </div>
<!--  左边百分比圈-->
  <div id="leftMid">
    <div class="left">
      <div class="item ">
        <span class="case">用例执行率</span>
        <Percent :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData"/>
      </div>
      <div class="item ">
        <span>用例通过率</span>
        <Percent :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData"/>
      </div>
    </div>
<!--右边轮播表-->
    <div class=" right">
        <span style="color:#5cd9e8">
          <icon name="align-left"></icon>
        </span>
      <span class="models">各模块通过率</span>
      <!-- <dv-scroll-ranking-board :config="ranking" style="padding-top:0.1rem;height:2.75rem;font-size: 0.2rem"/> -->
      <dv-scroll-board id="scroll" :config="ranking" style="padding-top:0.1rem;height:2.75rem;font-size: 0.2rem"/>
    </div>
    </div>
</div>
</template>

<script>
import Percent from "@/components/percent"
export default {
  data() {
    return {
      //轮播数据
      ranking: {
        data: [],
        header:["<span style='font-size:0.18rem;'>模块</span>",
        "<span style='font-size:0.18rem;'>用例数</span>",
        "<span style='font-size:0.18rem;'>通过率%</span>",],
        // carousel: "single",
        headerBGC:'#21618C',
        headerHeight:this.refontSize(20),
        rowNum:8,
        carousel: "page",
        // unit: "%",
        // rowNum: 4,
        columnWidth: [this.refontSize(145),this.refontSize(85),this.refontSize(100)],
        waitTime: 4000,
      },

      //百分比圈数据
      rate: [
        {
          id: "centerRate1",
          tips: 0,
          colorData: {
            textStyle: "#3fc0fb",
            series: {
              color: ["#00bcd44a", "transparent"],
              dataColor: {
                normal: "#03a9f4",
                shadowColor: "#97e2f5"
              }
            }
          }
        },
        {
          id: "centerRate2",
          tips: 0,
          colorData: {
            textStyle: "#67e0e3",
            series: {
              color: ["#faf3a378", "transparent"],
              dataColor: {
                normal: "#ff9800",
                shadowColor: "#fcebad"
              }
            }
          }
        }
      ]
    };
  },
  methods: {
    //请求用例执行数据并处理
    gettestexcu(){
      this.$http({ method: 'get',
        url: 'show/testexcu/?system='+this.$route.query.project,}).then(response => {
            // console.log(response.data);
        // 转换为整数 0.25->25
        this.rate[0].tips = ((response.data.completeCase/response.data.totalCase)*100).toFixed(2)
        this.rate[1].tips = ((response.data.passCase/response.data.completeCase)*100).toFixed(2)
        // console.log(this.rate)
        // 轮播数据
        var rdt = response.data.passDetail;
        var rdtc = response.data.passDetailCount;
        var dt = [];
        for (var name in rdt) {
          var onedata = []
          onedata.push("<span style='font-size:0.18rem;'>"+name.substring(0,10)+"</span>")
          onedata.push("<span style='font-size:0.18rem;'>"+rdtc[name]+"</span>")
          onedata.push("<span style='font-size:0.18rem;'>"+(rdt[name] * 100).toFixed(2)+"</span>")
          // dt.push({
          //   // name: name,
          //   name: "<span style='font-size:0.18rem;'>"+name.substring(0,10)+"</span>",
          //   value: (rdt[name] * 100).toFixed(2)
          // })
          dt.push(onedata)
        }
        this.ranking = {...this.ranking}
        this.ranking.data = dt
          },
      );
    },
  },
  components: {
    Percent
  },
  mounted() {
    this.gettestexcu();
  },
};

</script>

<style lang="scss" scoped>
#leftMidTitle{
  font-size: 0.235rem;
  font-weight: bolder;
  color: #CCFFFF;
  }
#leftMid {
  display: grid;
  grid-template-columns: 2fr 10fr;
  padding-top: 0.2rem;
  
  .left {
    width: 100%;
    display: grid;
    grid-template-rows: 5fr 5fr;
    .item {
      font-size: 0.2rem;
    }
  }

  .right {
    // padding: 0.07rem 0.05rem;
    padding-bottom: 0;
    width: 100%;
    // display: grid;
    // grid-template-columns: 8fr 10fr;
    .models{
      font-size: 0.2rem;
    }
    .bg-color-black {
      border-radius: 0.0625rem;
    }

    //.ranking {
    //  padding: 0.125rem;
    //  width: 59%;
    //}

  .percent {
    width: 40%;
    display: flex;
    flex-wrap: wrap;

    .item {
      // font-size: 20;
      // font-weight: bold;
      width: 50%;
      height: 1.5rem;

      span {
        margin-top: 0.0875rem;
        display: flex;
        justify-content: center;
      }
    }
  }
  }
}
</style>